<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import IconList from './components/IconList.vue'
import TestMessage from './components/TestMessage.vue';
import { ElIcon } from 'element-plus';

const router = useRouter();
const isCollapse = ref(false);

const menuItems = [
  {
    path: '/',
    name: '首页',
    icon: 'Play'
  },
  {
    path: '/strategy/list',
    name: '策略管理',
    icon: 'Settings'
  },
  {
    path: '/backtest',
    name: '策略回测',
    icon: 'LineChart'
  },
  {
    path: '/trade',
    name: '策略交易',
    icon: 'BarChart'
  },
  {
    path: '/kline',
    name: 'K线图',
    icon: 'PieChart'
  },
  {
    path: '/config',
    name: '系统配置',
    icon: 'Download'
  }
];

function handleMenuClick(item) {
  router.push(item.path);
}
</script>

<template>
  <div class="app-container">
    <el-container style="height: 100vh;">
      <el-aside :width="isCollapse ? '64px' : '200px'" style="background-color: #0A1128;">
        <el-menu
          :collapse="isCollapse"
          background-color="#0A1128"
          text-color="#fff"
          active-text-color="#4096ff"
          :router="true"
        >
          <el-menu-item v-for="item in menuItems" :key="item.path" :index="item.path">
            <template #icon>
              <ElIcon :name="item.icon" />
            </template>
            <template #title>
              <span>{{ item.name }}</span>
            </template>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="background-color: #fff; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e6e6e6;">
          <div class="header-title">量化交易可视化系统</div>
          <div class="header-actions">
            <el-button type="primary" size="small" @click="isCollapse = !isCollapse">
              {{ isCollapse ? '展开' : '收起' }}菜单
            </el-button>
          </div>
        </el-header>

        <el-main style="padding: 1rem; box-sizing: border-box;">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.app-container {
  height: 100vh;
  overflow: hidden;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
  color: #1f2329;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.menu-icon {
  margin-right: 10px;
  font-size: 18px;
}
</style>
